# CSS 变量

:::warning 🚧 仍在开发中。

:::

Rspress 暴露了一些常用的 CSS 变量，相比于覆盖 Rspress 内置的 React 组件，覆盖 CSS 变量实现定制化更简单且可维护性更好。

你可以在该页面实时编辑和预览，并复制到 `theme/index.css` 中进行样式覆盖。下面是一个样式覆盖的简单示例：

import { Tabs, Tab } from '@theme';

<Tabs>
<Tab label="theme/index.tsx">

```tsx
import './index.css';
export * from '@rspress/core/theme';
```

</Tab>
<Tab label="theme/index.css">
```css
/* 复制 CSS 变量代码到这里来进行样式覆盖 */
```
</Tab>
</Tabs>

下面是 Rspress 提供的一些 CSS 变量及其默认值：

## 品牌色

import { CssPickerEditor } from '../../components/CssPickerEditor';

<CssPickerEditor />

## 代码块 - Shiki 主题

import { ShikiThemeSwitcher } from '../../components/ShikiThemeSwitcher';

<ShikiThemeSwitcher />

## 代码块 - 外层标题和容器

import { CssLiveCodeEditorWithDefault } from '../../components/CssLiveCodeEditor';

import rawCodeScss from '../../../../packages/core/src/theme/styles/vars/code-vars.css?raw';

<CssLiveCodeEditorWithDefault defaultValue={rawCodeScss} />

```tsx title="foo.ts"
console.log('This is a code block');
```

## 默认首页

import rawCodeHome from '../../../../packages/core/src/theme/styles/vars/home-vars.css?raw';

<CssLiveCodeEditorWithDefault defaultValue={rawCodeHome} />

## 基础变量

import rawCodeBase from '../../../../packages/core/src/theme/styles/vars/base-vars.css?raw';

<CssLiveCodeEditorWithDefault defaultValue={rawCodeBase} />
